<template>
  <div class="matrix-select">
    <Editable v-model="data.title" />
    <div class="matrix-select-edit-table">
      <div class="row">
        <div class="placeholder cell"></div>
        <div class="cell" v-for="col in data.cols" :key="col.id">
          <Editable v-model="col.label"></Editable>
        </div>
      </div>
      <div class="row" v-for="row in data.rows">
        <div class="cell">
          <Editable v-model="row.label"></Editable>
        </div>
        <div class="cell" v-for="col in data.cols">
          <el-radio :value="false"></el-radio>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps<{
  data: any
}>()
const data = props.data.data
</script>

<style lang="scss" scoped>
.matrix-select {
  .matrix-select-edit-table {
    border-left: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
    .row {
      display: flex;
      .cell {
        width: 118px;
        padding: 4px 8px;
        display: flex;
        align-items: center;
        border-right: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
      }
    }
  }
}
</style>
